<template>
  <div>
    <form action="">
      <h3>登录账号</h3>
      <p>虾米 - 严选商城欢迎您</p>
      <input
        type="text"
        :v-model="form.mobile"
        :style="{ borderColor: color, background: backColor }"
        placeholder="手机号码"
      />
      <input
        type="password"
        :v-model="form.psd"
        :style="{ borderColor: color, background: backColor }"
        placeholder="密码"
      />
      <button>登录</button>
    </form>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        form: {
          mobile: "",
          psd: "",
        },
        borderColor: "green",
        backColor: "rgb(255, 233, 228)",
      }
    },
  }
</script>

<style lang="scss" scoped>
  div {
    // margin: 50px;
    box-sizing: border-box;
    height: 100%;
    padding: 0.4rem;
    form {
      border: 0.02rem solid #f5f5f5;
      height: 100%;
      padding: 0.6rem;
      h3 {
        font-size: 0.44rem;
      }
      p {
        margin: 0.4rem 0;
        font-size: 0.28rem;
        color: #909090;
      }
      input {
        width: 100%;
        height: 40px;
        outline: none;
        margin-bottom: 20px;
        border-width: 0.02rem;
        border-style: solid;
        border-radius: 0.1rem;
        padding: 5px;
        box-sizing: border-box;
      }
      button {
        width: 4rem;
        height: 0.8rem;
        display: block;
        margin: 0 auto;
      }
    }
  }
</style>
